<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>draw</title>
	<style>
		#turtle-container {
			border: 1px solid #ccc;
		}

		body {
			background: #000;
			color: #C5CAE9;
		}

		.left,
		.right {
			float: left;
		}

		.right {
			margin-left: 20px;
		}
	</style>
</head>

<body>
	<div class="left">
		<canvas id="turtle-container" width="500" height="500"></canvas>
	</div>
	<div class="right">
		<p>
			提供以下函数：
		<ul>
			<li>forward(step)</li>
			<li>right(angle)</li>
			<li>jumpTo(x, y)</li>
			<li>setAngle(angle)</li>
			<li>setPenColor(color)</li>
			<li>setPenWidth(w)</li>
			<li>clear()</li>
		</ul>
		</p>
		<h4>请在定义自己的函数，绘制几何图形</h4>
		<p>示例:</p>
		<pre><code>
	setPenColor('#f0f')
	rect(10, 10, 40, 40)

	setPenColor('#00f')
	rect(60, 10, 40, 60)

	setPenColor('#0ff')
	rect(110, 10, 40, 100)

	setPenColor('#f00')
	rect(160, 10, 40, 150)

	setPenColor('#0f0')
	playgon(210, 10, 3, 100)

	setPenColor('#f60')
	playgon(320, 10, 4, 100)

	setPenColor('#060')
	square(10, 200, 50)

	setPenColor('#96f')
	square_line(10, 260, 20, 4, 10)

	setPenColor('#903')
	square_square(150, 260, 20, 6, 4, 10)
		</code></pre>
	</div>

	<script src="turtle.js"></script>
	<script>

		const rect = function rect(x, y, w, h) {
			/* 绘制矩形x,y为矩形左上角坐标w和h为宽高 */
			setAngle(0)
			jumpTo(x, y)
			var i = 0
			while (i < 2) {
				forward(w)
				right(90)
				forward(h)
				right(90)
				i++
			}
		}
		const playgon = function (x, y, n, l) {
			/* 绘制多边形 */
			var angle = 360 / n
			jumpTo(x, y)

			var i = 0
			while (i < n) {
				forward(l)
				right(angle)
				i++
			}
		}

		const square = function (x, y, w) {
			/* 绘制正方形 */
			playgon(x, y, 4, w)
		}

		const square_line = function (x, y, w, n, space) {
			/* 绘制一排正方形 */
			var i = 0
			while (i < n) {
				var x1 = x + (w + space) * i
				square(x1, y, w)
				i++
			}
		}

		const square_square = function (x, y, w, n, m, space) {
			/* 绘制一个方阵 */
			var i = 0
			while (i < m) {
				var y1 = y + (w + space) * i
				square_line(x, y1, w, n, space)
				i++
			}
		}


		const circle = function (x, y, r) {
			jumpTo(x, y)
			var L = 2 * Math.PI * r
			var n = 30
			var E = L / n
			playgon(x, y, n, E)
		}

		const circle_center = function (x, y, r) {
			var y1 = y - r
			jumpTo(x, y1)
			var L = 2 * Math.PI * r
			var n = 50
			var E = L / n
			var x1 = x - E / 2
			playgon(x1, y1, n, E)
		}


		setPenColor('#f0f')
		rect(10, 10, 40, 40)

		setPenColor('#00f')
		rect(60, 10, 40, 60)

		setPenColor('#0ff')
		rect(110, 10, 40, 100)

		setPenColor('#f00')
		rect(160, 10, 40, 150)

		setPenColor('#0f0')
		playgon(210, 10, 3, 100)

		setPenColor('#f60')
		playgon(320, 10, 4, 100)

		setPenColor('#060')
		playgon(360, 260, 5, 40)

		setPenColor('#96f')
		square_line(10, 260, 20, 4, 10)

		setPenColor('#903')
		square_square(150, 260, 20, 6, 4, 10)


		circle(460, 260, 30)

		const demo = {
			draw_wave: function (x, y, r, space, n) {
				setPenColor('#333')
				var r1 = r
				while (r1 > 0) {
					circle_center(250, 250, r1)
					r1 = r1 - space
				}
			},
			draw_star(x, y, r) {
				setPenColor('#0ff')
				var i = 0
				var w = r * Math.cos(13 * Math.PI / 180)
				var h = r * Math.sin(13 * Math.PI / 180)
				var x1 = x - w
				var y1 = y - h
				var step = w * 2
				jumpTo(x1, y1)
				while (i < 5) {
					forward(step)
					right(144)
					i++
				}
			}
		}

		demo.draw_wave(250, 250, 250, 20)
		demo.draw_star(250, 250, 50)
	</script>
</body>

</html>